import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '@/views/login/login.vue'
import home from '@/views/home/home' // 导入时的 .vue .js是可以省略的，会自动查找
import my from '@/views/home/my/my.vue' // 在home下可以切换跳转下面4个路由（嵌套路由） children
import find from '@/views/home/find/find.vue'
import myInfo from '@/views/home/my/myInfo.vue'
import store from '../store' // store === this.$store  导入时路径不写完整,vuex会自动补全，有时会出问题，最好写完整
import { getLocal } from '../utils/local'
import { auInfo } from '@/api/my.js'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: login
  },
  {
    path: '/home',
    component: home,
    redirect: '/home/my',
    children: [
      {
        path: '/home/my',
        component: my,
        meta: {
          needLogin: true, // 在需要登录的页面配置路由元加上needLogin
          needTab: true // 设置tabbar是否显示需要就设置一个needTab为true
        }
      },
      {
        path: '/home/myInfo',
        component: myInfo,
        meta: {
          needLogin: true // 在需要登录的页面配置路由元加上needLogin
        }
      },
      {
        path: '/home/find',
        component: find,
        meta: {
          needTab: true // 设置tabbar是否显示需要就设置一个needTab为true
        }
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 因为登录信息userInfo是通过vuex保存的，vuex只是暂时性保存，一刷新数据就没了，所以需要处理，通过导航守卫、路由元配置，来进行判断处理，
// 在需要登录的页面配置路由元加上needLogin，进行登录区分
router.beforeEach((to, from, next) => {
  // to: 去的路由
  // from: 来的路由
  // next: 是否通过  next()正常通过  next(path) 不通过并跳转
  window.console.log(to.meta.needLogin)
  // 如果页面不需要登录，直接next()
  // 需要登录
  //    判断是否已经登录(isLogin)   通过获取vuex的state中的isLogin状态来判断
  //       true(已登录) next()
  //       false(没登录)
  //           有token : 获取用户信息，用户信息获取完成后再next()
  //           没token : 跳到登录页
  if (!to.meta.needLogin) {
    next()
  } else {
    if (store.state.isLogin) {
      next()
    } else {
      if (getLocal()) {
        // 获取用户信息，存储用户信息，修改用户登录状态 next()
        auInfo().then(res => {
          window.console.log('用户信息', res)
          store.commit('setUserInfo', res.data.data)
          store.commit('setLoginStatus', true)
          next()
        })
      } else {
        // 实现一个需求，从个页面退出，登录后就回到哪个页面。使用路由传参来实现，通过路由传参告诉登录页登录完成后要回到哪里
        // 传：path?参数=值    fullPath比path包含更完整的路径参数，优先使用
        // 收：this.$route.query.参数名
        next('/login?redirect=' + to.fullPath)
      }
    }
  }
})

const routerPath = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return routerPath.call(this, location).catch(e => e)
}

export default router
